import { useSelector, useDispatch } from 'react-redux'
import {incrementAsync} from '../../store/counterSlice'
function CounterSlice() {
    const count = useSelector(state => (state as any).counter.value)
    const dispatch = useDispatch()

    const increment=()=>{
        dispatch({type: 'counter/increment'})
    }
    const decrement=()=>{
        dispatch({type: 'counter/decrement'})
    }
    const incrementByAmount=()=>{
        dispatch({type: 'counter/incrementByAmount',payload: {value:200}})
    }
    const incrementAsyncHandle=()=>{
       dispatch(incrementAsync({params:100}))
    }
    return (
        <div>
             <Button type="primary" onClick={increment}>+</Button>
             <Button type="primary" onClick={decrement}>-</Button>
             <Button type="primary" onClick={incrementByAmount}>200</Button>
             <Button type="primary" onClick={incrementAsyncHandle}>异步1</Button>
             <br/>
             <InputNumber value={count}/>
        </div>
    )
    
}
export default CounterSlice;